<template>
	<div class="upload-container">
		<el-upload :data="dataObj" :multiple="false" :show-file-list="false" :on-remove="removeHandle"
			:http-request="uploadImgHandle" class="image-uploader" drag action="#" accept=".jpg,.jpeg,.png,.JPG,.JPEG">
			<i class="el-icon-upload" />
			<div class="el-upload__text">
				将文件拖到此处，或<em>点击上传</em>
			</div>
		</el-upload>
		<div class="image-preview image-app-preview">
			<div v-show="imageUrl.length>1" class="image-preview-wrapper">
				<img :src="imageUrl">
				<div class="image-preview-action">
					<i class="el-icon-delete" @click="rmImage" />
				</div>
			</div>
		</div>
		<div class="image-preview">
			<div v-show="imageUrl.length>1" class="image-preview-wrapper">
				<img :src="imageUrl">
				<div class="image-preview-action">
					<i class="el-icon-delete" @click="rmImage" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		uploadFile
	} from "@/api/common.js"

	export default {
		name: 'SingleImageUpload3',
		props: {
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				tempUrl: '',
				dataObj: {
					token: '',
					key: ''
				}
			}
		},
		computed: {
			imageUrl() {
				return this.value
			}
		},
		methods: {
			rmImage() {
				this.emitInput('')
			},
			emitInput(val) {
				this.$emit('input', val)
			},
			handleImageSuccess(file) {
				this.emitInput(file.files.file)
			},
			uploadImgHandle(event) {
				const e = event.file;
				if (['image/jpg', 'image/jpeg', 'image/png', 'image/JPG', 'image/JPEG'].indexOf(
						e.type) == -1) {
					this.$message.error('请上传正确的图片格式')
					return false
				}
				var formData = new FormData();
				formData.append('file', e);
				formData.append('admin_upload', 1);
				const loading = this.$loading({
					lock: true,
					text: '上传中，请稍后...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				uploadFile(formData).then((res) => {
					this.$emit("afterUpload", res.data);
				}).finally(() => {
					loading.close();
				});
			},
			removeHandle() {
				this.$emit("onRemove");
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/mixin.scss";

	.upload-container {
		width: 100%;
		position: relative;
		@include clearfix;

		.image-uploader {
			width: 35%;
			float: left;
		}

		.image-preview {
			width: 200px;
			height: 200px;
			position: relative;
			border: 1px dashed #d9d9d9;
			float: left;
			margin-left: 50px;

			.image-preview-wrapper {
				position: relative;
				width: 100%;
				height: 100%;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.image-preview-action {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				cursor: default;
				text-align: center;
				color: #fff;
				opacity: 0;
				font-size: 20px;
				background-color: rgba(0, 0, 0, .5);
				transition: opacity .3s;
				cursor: pointer;
				text-align: center;
				line-height: 200px;

				.el-icon-delete {
					font-size: 36px;
				}
			}

			&:hover {
				.image-preview-action {
					opacity: 1;
				}
			}
		}

		.image-app-preview {
			width: 320px;
			height: 180px;
			position: relative;
			border: 1px dashed #d9d9d9;
			float: left;
			margin-left: 50px;

			.app-fake-conver {
				height: 44px;
				position: absolute;
				width: 100%; // background: rgba(0, 0, 0, .1);
				text-align: center;
				line-height: 64px;
				color: #fff;
			}
		}
	}
</style>
